import React, { Component } from 'react'
import { WebView, TouchableOpacity, Text } from 'react-native'
import DeviceInfo from 'react-native-device-info'
import { Actions } from 'react-native-router-flux'
import { Container } from 'native-base'
import ShareCom from '../../../components/share'
import { connect } from 'react-redux' // 引入connect函数
import * as articleAction from '../../../redux/actions/article'
import commonStyle from '../../../libs/commonStyle'
import { deviceHeightDp } from '../../../libs/pxToDp'
import HeaderWhite from '../../../components/header/headerWhite'
import API from '../../../api/request'
// const detailUrl = 'http://thinkleaf.cn/web/articleDetail.html'
// const detailUrl = '/web/articleDetail.html'
// import { PROTOCOL } from '../../../config/index'
// const detailUrl = 'http://192.168.1.122:888/articleDetail.html'

class MyWeb extends Component {
	constructor(props) {
		super(props)
		this.state = {
			money: '',
			id: '',
			articleInfo: {},
			shareInfo: {}
		}
	}
	getShareContent(htm) {
		return htm.replace(/<[^>]*>|/g,"").slice(0, 50)
	}
	async _onSharePanel() {
		let { title, user, coverUrl: thumbImage} = this.props
		let { id } = this.props.navigation.state.params
		let {content:description} = this.props.detailInfo
		description = this.getShareContent(description)
		this.articleInfo = {
			article_id: id,
			user_id: user.userId,
			module: 3,
			visit_id: new Date().getTime()
		}
		let webpageUrl = await this.getShareLinkApi({
			_id: id,
			myid: user.userId
		})
		this.setState({
			shareInfo: {
				title,
				description,
				webpageUrl,
				thumbImage,
				type: 'news'
			}
		})

		this.refs.sharePanelCom.toggleDialog.bind(this.refs.sharePanelCom)()
	}
	async getShareLinkApi(params) {
		let url = '/api/skip/articleJump'
		let res = await API.get(url, params)
		if (res && res.code === '200') {
			return res.data
		}
		return ''
	}
	async componentDidMount() {
		let { id, money } = this.props.navigation.state.params
		this.setState({
			money,
			id
		})
		this.props.articleDetail(id)
	}
	render() {
		let {
			canuseDomain,
			user: { userId }
		} = this.props
		let { id, money } = this.state
		let uri = canuseDomain + '?_id='+ id + '&myId='+ userId + '&money='+ money
		return (
			<Container>
				<HeaderWhite title="文章详情" hasLeft />
				<WebView
					source={{
						uri: uri
	
					}}
					// scalesPageToFit={false}
					style={{ width: '100%', height: deviceHeightDp }}
					userAgent={DeviceInfo.getUserAgent() + " - __xihe__ - android "}
				/>
				<TouchableOpacity
					activeOpacity={1}
					onPress={this._onSharePanel.bind(this)}
					style={[
						commonStyle.h100,
						commonStyle.activeBackgroundColor,
						commonStyle.flexCenter,
						{ position: 'absolute', bottom: 0, width: '100%' }
					]}
				>
					<Text style={commonStyle.colorWhite}>
						转发赚钱，每阅读赚1-2毛
					</Text>
				</TouchableOpacity>
				<ShareCom
					ref="sharePanelCom"
					articleInfo={this.state.articleInfo}
					params={this.state.shareInfo}
					qrcode={false}
				/>
			</Container>
		)
	}
}

export default connect(
	state => ({
		user: state.user.user,
		detailInfo: state.article.detailInfo,
		canuseDomain: state.article.canuseDomain
	}),
	dispatch => ({
		articleDetail: params => dispatch(articleAction.articleDetail(params))
	})
)(MyWeb)
